<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      :root  {
        --black: #373737;
        --sect-1: #ff9900;
        --sect-2: #2196f3;
        --sect-3: #e63232;
        --sect-4: #4caf50;
        --sect-5: #8946ff;
      }

      body {
        margin: 0;
        padding: 0;
        transition: all 1s ease 0s;
      }

      header {
        width: 100%;
      }

      a {
        width: 100%;
        z-index: 1;
        color: #ffffff;
        text-decoration: none;
        padding: 16px 10px;
        position: relative;
        font-size: 1.6rem;
        border: 2px solid #000;
        border-top-width: 0;
        border-bottom-width: 4px;
      }

      a:first-child {
        border-left-width: 0;
      }

      a:last-child {
        border-right-width: 0;
      }

      h2,
      p {
        margin: 0;
        width: 100%;
        text-align: center;
      }

      nav {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 65px;
        background: linear-gradient(0deg, #fff 0 0px, #373737 1px 100%);
        display: flex;
        text-align: center;
        transition: all 0.5s ease 0s;
      }

      nav::after {
        content: "";
        position: absolute;
        width: calc(20vw - 3px);
        height: 100%;
        background: linear-gradient(
          90deg,
          #ff9900 0px calc(20vw - 5px),
          #2196f3 0px calc(40vw - 6px),
          #e63232 0px calc(60vw - 7px),
          #4caf50 0px calc(80vw - 10px),
          #8946ff 0px calc(100vw)
        );
        bottom: 0;
        left: 0;
        animation: progress linear;
        animation-timeline: scroll(root);
        z-index: -1;
      }

      @keyframes progress {
        100% {
          width: 100%;
        }
      }

      section {
        /* --bg: var(--sect-1); */
        height: 100vh;
        background: #ff9900;
        /* background: --bg; */
        color: #ffffff;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        font-size: 4rem;
        /* padding-top: 30px; */
        align-content: center;
      }

      #page1 {
        /* --bg: var(--sect-1); */
        background: #ff9900;
      }

      #page2 {
        /* --bg: var(--sect-2); */
        background: #2196f3;
      }

      #page3 {
        /* --bg: var(--sect-3); */
        background: #e63232;
      }

      #page4 {
        /* --bg: var(--sect-4); */
        background: #4caf50;
      }

      #page5 {
        /* --bg: var(--sect-5); */
        background: #8946ff;
      }
    </style>
  </head>

  <body>
    <header>
      <nav>
        <a href="#page1">page1</a>
        <a href="#page2">page2</a>
        <a href="#page3">page3</a>
        <a href="#page4">page4</a>
        <a href="#page5">page5</a>
      </nav>
    </header>
    <section id="page1">
      <h2>page1</h2>
      <p>第一页</p>
    </section>
    <section id="page2">
      <h2>page2</h2>
      <p>第二页</p>
    </section>
    <section id="page3">
      <h2>page3</h2>
      <p>第三页</p>
    </section>
    <section id="page4">
      <h2>page4</h2>
      <p>第四页</p>
    </section>
    <section id="page5">
      <h2>page5</h2>
      <p>第五页</p>
    </section>
  </body>
</html>
